<template>
  <view class="register-page">
    <!-- 标题 -->
    <view class="title">用户注册</view>
    
    <!-- 表单区域 -->
    <view class="form-container">
      <!-- 用户名 -->
      <view class="input-group">
        <input 
          v-model="username" 
          placeholder="请输入用户名" 
          class="input"
        />
      </view>
      
      <!-- 电话号码 -->
      <view class="input-group">
        <input 
          v-model="phone" 
          placeholder="手机号" 
          type="number"
          class="input"
        />
      </view>
      
      <!-- 邮箱 -->
      <view class="input-group">
        <input 
          v-model="email" 
          placeholder="请输入邮箱" 
          class="input"
        />
      </view>
      
      <!-- 密码 -->
      <view class="input-group">
        <input 
          v-model="password" 
          type="password" 
          placeholder="请输入密码" 
          class="input"
        />
      </view>
      
      <!-- 确认密码 -->
      <view class="input-group">
        <input 
          v-model="confirmPassword" 
          type="password" 
          placeholder="请再次输入密码" 
          class="input"
        />
      </view>
      
      <!-- 错误提示 -->
      <view v-if="showPwdError" class="error-text">两次密码输入不一致</view>
      <view v-if="showPhoneError" class="error-text">请输入正确的电话号码</view>
      <view v-if="showEmailError" class="error-text">请输入正确的邮箱格式</view>
      
      <!-- 注册按钮 -->
      <button @click="handleRegister" class="register-btn">注册</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',      // 用户名
      phone: '',         // 电话号码
      email: '',         // 邮箱
      password: '',      // 密码
      confirmPassword: '', // 确认密码
      showPwdError: false, // 密码错误提示
      showPhoneError: false, // 电话格式错误提示
      showEmailError: false // 邮箱格式错误提示
    }
  },
  methods: {
    // 验证电话号码格式（简单验证：11位数字）
    isPhoneValid(phone) {
      return /^1[3-9]\d{9}$/.test(phone)
    },
    
    // 验证邮箱格式
    isEmailValid(email) {
      return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email)
    },
    
    async handleRegister() {
      // 1. 重置所有错误提示
      this.showPwdError = false
      this.showPhoneError = false
      this.showEmailError = false
      
      // 2. 基础表单校验
      if (!this.username || !this.phone || !this.email || !this.password || !this.confirmPassword) {
        uni.showToast({ title: '请填写完整信息', icon: 'none' })
        return
      }
      
      // 3. 格式校验
      let isValid = true
      
      // 电话号码格式校验
      if (!this.isPhoneValid(this.phone)) {
        this.showPhoneError = true
        isValid = false
      }
      
      // 邮箱格式校验
      if (!this.isEmailValid(this.email)) {
        this.showEmailError = true
        isValid = false
      }
      
      // 密码一致性校验
      if (this.password !== this.confirmPassword) {
        this.showPwdError = true
        isValid = false
      }
      
      // 如果有格式错误，直接返回
      if (!isValid) return
      
      // 4. 调用addUser云函数
      try {
        const res = await uniCloud.callFunction({
          name: 'addUser',
          data: {
            username: this.username,
            phone: this.phone,
            email: this.email,
            password: this.password
          }
        })
        
        // 5. 处理云函数返回结果
        if (res.result.code === 0) {
          uni.showToast({ title: '注册成功' })
          // 注册成功后跳转登录页
          setTimeout(() => {
            uni.navigateTo({ url: '/pages/login/login' })
          }, 1500)
        } else {
          uni.showToast({ title: res.result.msg, icon: 'none' })
        }
      } catch (err) {
        uni.showToast({ title: '网络异常', icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
/* 页面整体样式 */
.register-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 80rpx 30rpx 0;
}

/* 标题 */
.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 60rpx;
}

/* 表单容器 */
.form-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

/* 输入框组 */
.input-group {
  margin-bottom: 30rpx;
  border: 1px solid #e5e7eb;
  border-radius: 10rpx;
  overflow: hidden;
}
.input {
  width: 100%;
  padding: 20rpx 24rpx;
  font-size: 32rpx;
  color: #333;
  /* 清除默认样式 */
  border: none;
  outline: none;
}
.input::placeholder {
  color: #9ca3af;
}

/* 错误提示 */
.error-text {
  color: #ff4d4f;
  font-size: 28rpx;
  margin: -20rpx 0 20rpx 0;
  padding-left: 10rpx;
}

/* 注册按钮 */
.register-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(135deg, #1677ff 0%, #0d5bdc 100%);
  color: #fff;
  font-size: 34rpx;
  font-weight: 500;
  border-radius: 10rpx;
  border: none;
  margin-top: 20rpx;
}
</style>